<template>
    <div class="login">
        <div class="login_body">
            <div class="title">
                Diy报表系统
            </div>
            <el-form :model="state.form" label-width="auto" ref="ruleFormRef" :rules="state.rules" class="form">
                <el-form-item prop="account">
                    <el-input class="el-input" v-model="state.form.account" clearable placeholder="请输入账号">
                        <template #prepend>
                            <div class="pre">
                                账号<span class="required">*</span>
                            </div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input class="el-input" v-model="state.form.password" type="password" placeholder="请输入密码"
                        show-password>
                        <template #prepend>
                            <div class="pre">
                                密码<span class="required">*</span>
                            </div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="verificationCode">
                    <div class="captcha">
                        <el-input class="el-input" v-model="state.form.verificationCode" @keyup.enter="doLogin(ruleFormRef)" clearable placeholder="请输入验证码">
                            <template #prepend>
                                <div class="pre">
                                    验证码<span class="required">*</span>
                                </div>
                            </template>
                        </el-input>
                        <img :src="captchaUrl" @click="changeCaptchaUrl" />
                    </div>
                </el-form-item>

                <el-button class="btn" type="primary" @click="doLogin(ruleFormRef)">
                    登录
                </el-button>
            </el-form>
        </div>

    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { useUserStore } from '@/stores/user.js';
import { useRouter } from 'vue-router'
import { login } from '@/api/common/login'
import { v4 as uuidv4 } from 'uuid';

const userStore = useUserStore();
const router = useRouter()
let baseUrl = import.meta.env.VITE_API_URL

const ruleFormRef = ref()

const captchaUrl = ref(undefined)

const state = reactive({
    form: {
        account: undefined,
        password: undefined,
        verificationKey: undefined,
        verificationCode: undefined,
    },
    rules: {
        account: [
            { required: true, message: '账号必填', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '密码必填', trigger: 'blur' },
        ],
        verificationCode: [
            { required: true, message: '验证码必填', trigger: 'blur' },
        ],
    }
})

const doLogin = async (ruleFormRef) => {
    await ruleFormRef.validate((valid, fields) => {
        if (valid) {
            login(state.form).then(data => {
                let token = data
                localStorage.setItem('token', token);
                userStore.setToken(token)
                router.push("/")
            }).catch(e => {
                changeCaptchaUrl()
            })
        }
    })

}


const changeCaptchaUrl = () => {
    let verificationKey = uuidv4()
    captchaUrl.value = baseUrl + '/captcha/' + verificationKey
    state.form.verificationKey = verificationKey
}

onMounted(() => {
    changeCaptchaUrl()
})


</script>
<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-image: url(../../assets/login_background.jpg);
    background-size: 100%;
    background-position: center;

    .login_body {
        display: flex;
        align-items: center;
        // justify-content: center;
        flex-direction: column;
        background: #03a9f4f2;
        padding: 20px;
        margin-right: 100px;
    }

    .title {
        width: 400px;
        height: 50px;
        font-size: 30px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 4px;
        color: #ffffff;
        // margin-top: 300px;
    }

    .form {
        margin-top: 20px;
        width: 400px;

        .el-input:not(:first-child) {
            margin-top: 20px;
        }

        .el-input {
            height: 60px;

            .pre {
                width: 60px;
                text-align: center;
                font-size: 20px;
                color: #000;
            }
        }
    }

    .btn {
        margin-top: 20px;
        height: 50px;
        width: 150px;
        font-size: 25px;
        margin-left: 125px;
    }

    .captcha {
        display: flex;

        .el-input {
            flex-grow: 1;
        }

        img {
            flex-grow: 0;
            width: 160px;
            height: 60px;
            flex-shrink: 0;
        }
    }

    .required {
        color: red;
    }
}

:deep(.el-input__inner) {
    background-color: rgba(255, 255, 255, 0) !important;
    font-size: 20px !important;
}

:deep(.el-input__inner:-webkit-autofill) {
    transition: background-color 5000s ease-in-out 0s;
}

:deep(.el-input__inner:-webkit-autofill:focus) {
    -webkit-text-fill-color: #333 !important;
}
</style>
